<template>
    <div>
        <h3>显示</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>昵称</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>身份证照片</td>
                    <td>照片</td>
                    <td>手机号</td>
                    <td>生日</td>
                    <td>简介</td>
                    <td>角色</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.NickName }}</td>
                    <td>{{ item.Gender==1?"男":"女" }}</td>
                    <td>
                        <span v-if="item.State==1" style="color: aquamarine;">解冻</span>
                        <span v-if="item.State==0" style="color: brown;">解冻</span>
                    </td>
                    <td>
                        <img :src="item.CardPhoto" width="60" height="60">
                    </td>
                    <td>
                        <img :src="item.Photo" width="60" height="60">
                    </td>
                    <td>{{ item.Tel }}</td>
                    <td>{{ item.BirthDay }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.RoleName }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.lotalCont }}条</span>
            <span>共{{ data.lotalPage }}页</span>
            <span>当前{{ info.PageIndex }}/{{ data.lotalPage }}</span>

            <input type="button" value="首页" @click="fan(1)">
            <input type="button" value="上一页" @click="fan(info.PageIndex-1)">
            <input type="button" :valu="item" v-for="item in data.lotalPage" @change="fan(item)">
            <input type="button" value="下一页" @click="fan(info.PageIndex+1)">
            <input type="button" value="尾页" @click="fan(data.lotalPage)">
            <input type="number" v-model="info.PageIndex">
            <input type="button" value="跳转" @click="fan(info.PageIndex)">
            <select v-model="info.PageSize" @click="showlistadmin">
                <option :value="item" v-for="item in arr">每页{{ item }}</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios'; 
import moment from 'moment';
import{useRoute,useRouter}from 'vue-router'
const route=useRoute();
const router=useRouter();

let info:any=reactive({
    PageSize:2,
    PageIndex:1,
    username:'',
    RoleId:''
})
let data:any=reactive({
    list:[],
    lotalCont:'',
    lotalPage:'',
})
//显示
onMounted(()=>{
    showlistadmin();
})
const showlistadmin=()=>{
    axios({
        url:'/api/Admin/GetListAdmin',
        method:'get',
        params:info
    })
    .then((res)=>{
        Object.assign(data,res.data);
    })
}
//翻页
let arr:any=reactive([2,4,6])
const fan=(num:any)=>{
    if(num<1){
        info.PageIndex=1;
        return;
    }
    if(num>data.lotalPage){
        info.PageIndex=data.lotalPage ;
        return;
    }
    info.PageIndex=num;
    showlistadmin();
}
</script>

<style scoped>

</style>